<!--
 * @Author: your name
 * @Date: 2020-05-02 09:57:13
 * @LastEditTime: 2020-06-08 13:37:30
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-element-admin\src\views\danger\plan\components\drawplan.vue
 -->
 <template>
  <div class="app-container">
    <el-form style="overflow:hidden" :model="postForm" :rules="planRules" ref="planForm">
      <el-col :span="12">
        <el-form-item
          label-width="105px"
          class="postInfo-container-item"
          style="padding-right:40px"
          label="计划名称"
          prop="planName"
        >
          <el-input v-model="postForm.planName" placeholder="计划名称"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          label-width="105px"
          class="postInfo-container-item"
          label="检查目标"
          prop="targetId"
        >
          <el-select v-model="postForm.targetId" placeholder="检查目标" @change="changeSelectGet">
            <el-option
              v-for="(item,index) in ddlTarget"
              :key="index"
              :label="item.text"
              :value="item.value"
              :selected="item.selected"
              :disabled="!item.canSelect"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          label-width="105px"
          class="postInfo-container-item"
          label="开始时间"
          prop="startDate"
        >
          <el-date-picker
            v-model="postForm.startDate"
            type="date"
            class="filter-item"
            value-format="yyyy/MM/dd"
            placeholder="计划开始时间"
          ></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          label-width="105px"
          class="postInfo-container-item"
          label="完成时间"
          prop="overDate"
        >
          <el-date-picker
            v-model="postForm.overDate"
            type="date"
            class="filter-item"
            value-format="yyyy/MM/dd"
            placeholder="计划完成时间"
          ></el-date-picker>
        </el-form-item>
      </el-col>
    </el-form>
    <el-divider content-position="left" style="width:80%">检查任务</el-divider>
    <el-form>
      <el-col :span="10">
        <el-form-item label="被检查企业" label-width="115px">
          <el-select v-model="companyId" @change="changeSelectGet">
            <el-option
              v-for="(item,index) in ddlCompany"
              :key="index"
              :label="item.text"
              :value="item.value"
              :selected="item.selected"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          label-width="105px"
          class="postInfo-container-item"
          style="padding-right:40px"
          label="任务名称"
        >
          <el-input v-model="taskName" placeholder="任务名称"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="任务负责人" label-width="115px">
          <el-select v-model="executorId">
            <el-option
              v-for="(item,index) in ddlExecutor"
              :key="index"
              :label="item.text"
              :value="item.value"
              :selected="item.selected"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-button @click="addTask" type="primary" icon="el-icon-plus" style="margin-left:20px">添加任务</el-button>
      </el-col>
    </el-form>

    <el-table :data="listTask" border fit highlight-current-row style="width: 100%">
      <el-table-column align="center" label="序号" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.num }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="任务名称">
        <template slot-scope="scope">
          <span>{{ scope.row.taskName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="被检查企业">
        <template slot-scope="scope">
          <span>{{ scope.row.companyName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="任务负责人">
        <template slot-scope="scope">
          <span>{{ scope.row.executorName }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="delObj(scope.row.num)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增组织节点信息对话框 -->
    <el-divider content-position="left" style="width:80%"></el-divider>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeCurrentTag">关闭</el-button>
      <el-button type="primary" @click="addChecktarget">确 定</el-button>
    </div>
  </div>
</template>
<script>
import {
  fetchCheckPlan,
  fetchBasics,
  createCheckPlan,
  updateCheckPlan
} from '@/api/checkplan'

export default {
  name: 'drawPlan',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      planRules: {
        planName: [
          { required: true, message: '计划名称不能为空', trigger: 'blur' }
        ],
        startDate: [
          { required: true, message: '开始时间不能为空', trigger: 'blur' }
        ],
        overDate: [
          { required: true, message: '完成时间不能为空', trigger: 'blur' }
        ],
        targetId: [
          { required: true, message: '检查目标不能为空', trigger: 'blur' }
        ]
      },
      list: null,
      taskName: '',
      postForm: {
        id: null,
        listCompanyId: [],
        listExecutorId: [],
        listTaskName: [],
        lstTaskId: [],
        overDate: '',
        planName: '',
        startDate: '',
        targetId: null
      },
      objectList: null, //对象
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10
      },
      ddlTarget: [], //检查目标
      ddlExecutor: [], //检查人
      executorId: '',
      ddlCompany: [], //公司
      companyId: '',
      listTask: [],
      editId: '',
      companyObj: {} //被检查选择的obj
    }
  },
  methods: {
    //基础
    getBasics() {
      this.listLoading = true
      fetchBasics().then((response) => {
        this.ddlTarget = response.data.ddlTarget //检查目标
        console.log('ddlTarget')
        console.log(this.ddlTarget)
        this.ddlExecutor = response.data.ddlExecutor //检查人
        this.ddlCompany = response.data.ddlCompany //公司
        this.listLoading = false
      })
    },
    //添加任务
    addTask() {
      var companyName = ''
      var executorName = ''
      var num = this.listTask.length
      if (this.companyId && this.taskName && this.executorId) {
        var index1 = 1
        if (num > 0) {
          this.listTask.forEach((item1) => {
            if (
              item1.companyId == this.companyId &&
              item1.executorId == this.executorId
            ) {
              index1 = 0
            }
          })
        }
        if (index1) {
          this.ddlCompany.forEach((item) => {
            if (item.value == this.companyId) {
              companyName = item.text
            }
          })
          this.ddlExecutor.forEach((item) => {
            if (item.value == this.executorId) {
              executorName = item.text
            }
          })
          this.listTask.push({
            num: num + 1,
            taskName: this.taskName,
            companyId: this.companyId,
            companyName: companyName,
            executorId: this.executorId,
            executorName: executorName
          })
          this.companyId = ''
          this.taskName = ''
          this.executorId = ''
        } else {
          this.$notify({
            title: '失败',
            message: '检查企业和执行人不能重复',
            type: 'error',
            duration: 2000
          })
        }
        console.log(this.listTask)
      } else {
        this.$notify({
          title: '失败',
          message: '新增检查任务不允许为空',
          type: 'error',
          duration: 2000
        })
      }
    },
    //新增
    addChecktarget() {
      // console.log(this.listTask)
      var listdata = this.listTask
      if (this.listTask.length > 0) {
        this.postForm.listCompanyId = []
        this.postForm.listExecutorId = []
        this.postForm.listTaskName = []
        this.postForm.lstTaskId = []
        this.listTask.forEach((item) => {
          this.postForm.listCompanyId.push(item.companyId),
            this.postForm.listExecutorId.push(item.executorId),
            this.postForm.listTaskName.push(item.taskName),
            this.postForm.lstTaskId.push(0)
        })
      } else {
        this.$notify({
          title: '失败',
          message: '检查任务为空，计划不能增加',
          type: 'error',
          duration: 2000
        })
      }
      this.listLoading = true
      if (!this.isEdit) {
        //如果是新增检查计划
        this.$refs.planForm.validate((valid) => {
          if (valid) {
            createCheckPlan(this.postForm).then((res) => {
              if (res.success) {
                this.$notify({
                  title: '成功',
                  message: '新增检查计划成功',
                  type: 'success',
                  duration: 2000
                })
                this.postForm.status = 'published'
                this.listLoading = false
                this.setNull()
              } else {
                this.$notify({
                  title: '失败',
                  message: '新增检查计划失败',
                  type: 'error',
                  duration: 2000
                })
              }
            })
          } else {
            this.$notify({
              title: '失败',
              message: '验证失败',
              type: 'error',
              duration: 2000
            })
            return false
          }
        })
      } else {
        //如果是编辑计划
        this.$refs.planForm.validate((valid) => {
          if (valid) {
            createCheckPlan(this.postForm).then((res) => {
              if (res.success) {
                this.$notify({
                  title: '成功',
                  message: '编辑检查计划成功',
                  type: 'success',
                  duration: 2000
                })
                this.postForm.status = 'published'
                this.listLoading = false
                this.setNull()
              } else {
                this.$notify({
                  title: '失败',
                  message: '编辑检查计划失败',
                  type: 'error',
                  duration: 2000
                })
              }
            })
          } else {
            this.$notify({
              title: '失败',
              message: '验证失败',
              type: 'error',
              duration: 2000
            })
            return false
          }
        })
      }
    },
    //删除任务列表
    delObj(index) {
      this.listTask.splice(index - 1, 1)
      console.log(this.listTask)
    },
    //编辑根据id获取用户数据信息
    fetchData(id) {
      updateCheckPlan(id)
        .then((response) => {
          console.log('response')
          this.postForm = response.data.mo
          console.log(response.data.mo)

          this.ddlTarget = response.data.ddlTarget
          var listD = response.data.mo.listCheckTaskVo
          for (let i = 0; i < listD.length; i++) {
            listD[i].num = i + 1
          }
          console.log(listD)
          this.listTask = listD
          this.postForm.listCheckTask = listD
          this.setTagsViewTitle()
          this.setPageTitle()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    setTagsViewTitle() {
      var title = ''
      if (this.isEdit) {
        title = '编辑检查计划'
      } else if (this.isEdit == false) {
        title = '制定检查计划'
      }

      const route = Object.assign({}, this.tempRoute, {
        title: `${title}-${this.postForm.id}`
      })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    setPageTitle() {
      var title = ''
      // debugger
      if (this.isEdit) {
        title = '编辑检查计划'
      } else if (this.isEdit == false) {
        title = '制定检查计划'
      }
      console.log(title)
      document.title = `${title} - ${this.postForm.id}`
    },
    setNull() {
      this.postForm.listCompanyId = []
      this.postForm.listExecutorId = []
      this.postForm.listTaskName = []
      this.postForm.lstTaskId = []
      this.postForm.overDate = ''
      this.postForm.startDate = ''
      this.postForm.planName = ''
      this.postForm.targetId = null
      this.listTask = []
    },
    closeCurrentTag() {
      // 调用全局挂载的方法
      this.$store.dispatch('tagsView/delView', this.$route)
      // 返回上一步路由
      this.$router.go(-1)
    },
    //被检查下拉
    changeSelectGet() {
      console.log(this.companyId)
      console.log(this.postForm.targetId)
      let obj = {}
      let valE = ''
      let valT = ''
      if (this.companyId != '') {
        for (let i = 0; i < this.ddlCompany.length; i++) {
          if (this.companyId == this.ddlCompany[i].value) {
            obj = this.ddlCompany[i]
            valE = this.ddlCompany[i].text
          }
        }
        this.companyObj = obj
        for (let j = 0; j < this.ddlCompany.length; j++) {
          if (
            this.companyObj.extData.managerOfficer == this.ddlExecutor[j].value
          ) {
            this.executorId = this.ddlExecutor[j].value
          }
        }
      }
      if (this.postForm.targetId != '') {
        for (let i = 0; i < this.ddlTarget.length; i++) {
          if (this.postForm.targetId == this.ddlTarget[i].value) {
            valT = this.ddlTarget[i].text.replace(/-/g, '')
          }
        }
      }
      console.log(this.taskName)
      this.taskName = valE + valT + '检查'
      console.log(obj)
    }
  },
  created() {
    this.getBasics() //获取新增或者编辑下拉信息
    if (this.isEdit) {
      //如果是编辑数据
      const id = this.$route.params && this.$route.params.id
      this.editId = id
      this.fetchData(id)
    } else {
      const id = 0 //新增时是0
      this.editId = id
    }
    this.postForm.id = this.editId
    this.tempRoute = Object.assign({}, this.$route)
  }
}
</script>
<style scoped  lang="scss" >
@import '~@/styles/mixin.scss';
.app-container /deep/ .el-divider--horizontal:first-child {
  width: 75%;
  display: inline-block;
}
.app-container /deep/ .el-input {
  width: 50%;
}
.app-container /deep/ .el-divider--horizontal:last-child {
  width: 24%;
  display: inline-block;
}
.app-container /deep/ .el-select {
  width: 82%;
}
.app-container /deep/ .el-dialog__footer {
  text-align: center;
}
.app-container /deep/ .dialog-footer {
  text-align: center;
}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.pagination-container {
  padding: 0;
}
.createPost-container {
  position: relative;

  .createPost-main-container {
    padding: 40px 45px 20px 50px;

    .postInfo-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .postInfo-container-item {
        float: left;
      }
    }
  }

  .word-counter {
    width: 40px;
    position: absolute;
    right: 10px;
    top: 0px;
  }
}
</style>
